<template>
  <div class="footer-box">
    <div class="footer-tab" @click="tohome">
      <img :src="home === true ? require('@/assets/image/首页0.png') : require('@/assets/image/首页1.png')">
      <p>首页</p>
    </div>
    <div class="footer-tab" @click="tonews">
      <img :src="news === true ? require('@/assets/image/动态0.png') : require('@/assets/image/动态1.png')">
      <p>动态</p>
    </div>
    <div class="footer-tab" @click="tomsg">
      <img :src="msg === true ? require('@/assets/image/消息0.png') : require('@/assets/image/消息1.png')">
      <p>消息</p>
    </div>
    <div class="footer-tab" @click="tomy">
      <img :src="my === true ? require('@/assets/image/我的0.png') : require('@/assets/image/我的1.png')">
      <p>我的</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      home: true,
      news: true,
      msg: true,
      my: true
    }
  },
  methods: {
    tohome() {
      this.$router.push('/')
      this.home
      this.home = !this.home
    },
    tonews() {
      this.$router.push('/news')
      this.news = !this.news
    },
    tomsg() {
      this.$router.push('/msg')
      this.msg = !this.msg
    },
    tomy() {
      this.$router.push('/my')
      this.my = !this.my
    }
  }
}
</script>

<style lang="scss" scoped>
$width: 100%;

.footer-box {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: $width;
  height: 50px;

  .footer-tab {
    border-top: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    width: 25%;
    text-align: center;

    img {
      width: 24px;
      height: 24px;
    }

    p {
      font-size: 10px;
      margin-top: 2px;
      margin-bottom: 3px;
    }
  }
}
</style>